<div class="mb-3 flex justify-between items-center">
  <div class="h-[41px] flex items-center text-lg font-semibold text-gray-900">
    {{ 'PAC.Xpert.Monitoring' | translate: {Default: 'Monitoring'} }}
  </div>
  <div
    class="flex items-center p-2 rounded-xl border-[0.5px] border-gray-200 shadow-xs cursor-pointer hover:bg-gray-100"
    [ngmTooltip]="perfInDevelopment"
    [hideDelay]="100"
  >
    <div class="mr-2 w-6 h-6 p-1 flex justify-center items-center rounded-lg shadow-md bg-primary-500 text-white">
      <i class="ri-pulse-ai-line"></i>
    </div>
    <div class="leading-5 text-sm font-semibold text-gray-700">
      {{ 'PAC.Xpert.TracingAppPerf' | translate: {Default: 'Tracing app performance'} }}
    </div>
    <div class="flex items-center">
      <div class="inline-block">
        <div class="ml-2 w-6 h-6 p-1 flex justify-center items-center rounded-md hover:bg-black/5 cursor-pointer">
          <i class="ri-equalizer-2-line"></i>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="grid gap-6 grid-cols-1 xl:grid-cols-2 w-full mb-6">
  <div class="shadow-sm border-[0.5px] rounded-xl overflow-hidden border-gray-200">
    <div class="px-6 py-5 bg-primary-50 bg-opacity-40 rounded-lg">
      <div class="mb-2.5 flex flex-row items-start justify-between">
        <div class="flex items-start p-1">
          <emoji-avatar [avatar]="avatar()" class="shrink-0 mr-3 rounded-lg shadow-sm overflow-hidden"/>
          
          <div class="group">
            <div
              class="flex flex-row items-center text-sm font-semibold text-gray-700 group-hover:text-gray-900 break-all"
            >
              {{ xpert()?.title || xpert()?.name }}
            </div>
            <div class="text-sm font-normal text-gray-500 group-hover:text-gray-700 break-all">
              {{ 'PAC.Xpert.ReadyAIWebApp' | translate: {Default: 'Ready-to-use AI WebApp'} }}
            </div>
            <div class="text-text-tertiary system-2xs-medium-uppercase"></div>
          </div>
        </div>
        <div class="flex flex-row items-center h-9">
          @if (enabledApp()) {
            <div class="px-2.5 py-px text-xs leading-5 rounded-md inline-flex items-center flex-shrink-0 text-green-800 bg-green-100 mr-2">
              {{ 'PAC.KEY_WORDS.InService' | translate: {Default: 'In Service'} }}
            </div>
          } @else {
            <div class="px-2.5 py-px text-xs leading-5 rounded-md inline-flex items-center flex-shrink-0 text-yellow-800 bg-yellow-100 mr-2">
              {{ 'PAC.KEY_WORDS.Disabled' | translate: {Default: 'Disabled'} }}
            </div>
          }

          <label class="inline-flex items-center cursor-pointer"
            [matTooltip]="'PAC.Xpert.EnableXpertChatApp' | translate: {Default: 'Enable or disable chat app for xpert'}"
            matTooltipPosition="above">
            <input type="checkbox" value="" class="sr-only peer" [ngModel]="enabledApp()" (ngModelChange)="updateApp({enabled: $event})">
            <div class="relative w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
          </label>
        </div>
      </div>
      <div class="flex flex-col justify-center py-2">
        <div class="py-1">
          <div class="pb-1 text-sm text-gray-500">
            {{ 'PAC.KEY_WORDS.PublicURL' | translate: {Default: 'Public URL'} }}
          </div>
          <div
            class="w-full h-9 pl-2 pr-0.5 py-0.5 bg-black bg-opacity-2 rounded-lg border border-black border-opacity-5 justify-start items-center inline-flex"
          >
            <div class="px-2 justify-start items-start gap-2 flex flex-1 min-w-0">
              <div class="text-gray-700 text-sm font-medium text-ellipsis overflow-hidden whitespace-nowrap">
                {{appUrl()}}
              </div>
            </div>
            <div class="border-r border-solid mx-2 border-divider-deep !h-3.5 shrink-0"></div>
            <div class="w-8 h-8 cursor-pointer rounded-lg flex justify-center items-center text-text-secondary hover:bg-gray-200 hover:text-text-primary"
              [matTooltip]="'PAC.Xpert.QRCodeSharing' | translate: {Default: 'QR code sharing'}"
              matTooltipPosition="above"
              [cdkMenuTriggerFor]="qrcode"
            >
              <i class="ri-qr-code-line text-lg"></i>
            </div>
            <div class="w-8 h-8 cursor-pointer rounded-lg flex justify-center items-center text-text-secondary hover:bg-gray-200 hover:text-text-primary"
              [matTooltip]="'PAC.KEY_WORDS.Copy' | translate: {Default: 'Copy'}"
              matTooltipPosition="above"
              (click)="copy(appUrl())"
            >
              <i class="ri-clipboard-line text-lg"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="pt-2 flex flex-row items-center flex-wrap gap-y-2">
        <button type="button" class="btn disabled:btn-disabled btn-secondary btn-medium mr-2"
          [disabled]="!enabledApp()"
          (click)="preview()">
          <div class="flex flex-row items-center">
            <i class="ri-slideshow-3-line text-lg mr-1.5"></i>
            <span class="text-[13px]">{{ 'PAC.KEY_WORDS.Preview' | translate: {Default: 'Preview'} }}</span>
          </div>
        </button>
        <!-- <button type="button" class="btn disabled:btn-disabled btn-secondary btn-medium mr-2">
          <div class="flex flex-row items-center">
            <i class="ri-quill-pen-ai-line text-lg mr-1.5"></i>
            <span class="text-[13px]">{{ 'PAC.KEY_WORDS.Customize' | translate: {Default: 'Customize'} }}</span>
          </div>
        </button> -->
        <button type="button" class="btn disabled:btn-disabled btn-secondary btn-medium mr-2"
          [disabled]="!enabledApp()"
          (click)="openEmbedded()"
        >
          <div class="flex flex-row items-center">
            <i class="ri-terminal-window-line text-lg mr-1.5"></i>
            <span class="text-[13px]">{{ 'PAC.KEY_WORDS.Embedded' | translate: {Default: 'Embedded'} }}</span>
          </div>
        </button>
        <button type="button" class="btn disabled:btn-disabled btn-secondary btn-medium mr-2"
          [disabled]="!enabledApp()"
          (click)="openChatApp()"
        >
          <div class="flex flex-row items-center">
            <i class="ri-settings-4-line text-lg mr-1.5"></i>
            <span class="text-[13px]">{{ 'PAC.KEY_WORDS.Settings' | translate: {Default: 'Settings'} }}</span>
          </div>
        </button>
      </div>
    </div>
  </div>

  <div class="shadow-sm border-[0.5px] rounded-xl overflow-hidden border-gray-200">
    <div class="px-6 py-5 bg-purple-50 rounded-lg">
      <div class="mb-2.5 flex flex-row items-start justify-between">
        <div class="flex items-start p-1">
          <div class="flex-shrink-0 mr-3">
            <span
              class="flex items-center justify-center relative rounded-lg grow-0 shrink-0 overflow-hidden w-9 h-9 text-[22px] border !bg-purple-50 !border-purple-200"
              style="background: rgb(255, 234, 213)"
              ><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                  d="M8.5 3.5C8.5 4.60457 9.39543 5.5 10.5 5.5C11.6046 5.5 12.5 4.60457 12.5 3.5C12.5 2.39543 11.6046 1.5 10.5 1.5C9.39543 1.5 8.5 2.39543 8.5 3.5Z"
                  stroke="#5850EC"
                  stroke-width="1.5"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                ></path>
                <path
                  d="M12.5 9C12.5 10.1046 13.3954 11 14.5 11C15.6046 11 16.5 10.1046 16.5 9C16.5 7.89543 15.6046 7 14.5 7C13.3954 7 12.5 7.89543 12.5 9Z"
                  stroke="#5850EC"
                  stroke-width="1.5"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                ></path>
                <path
                  d="M8.5 3.5H5.5L3.5 6.5"
                  stroke="#5850EC"
                  stroke-width="1.5"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                ></path>
                <path
                  d="M8.5 14.5C8.5 15.6046 9.39543 16.5 10.5 16.5C11.6046 16.5 12.5 15.6046 12.5 14.5C12.5 13.3954 11.6046 12.5 10.5 12.5C9.39543 12.5 8.5 13.3954 8.5 14.5Z"
                  stroke="#5850EC"
                  stroke-width="1.5"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                ></path>
                <path
                  d="M8.5 14.5H5.5L3.5 11.5"
                  stroke="#5850EC"
                  stroke-width="1.5"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                ></path>
                <path
                  d="M12.5 9H1.5"
                  stroke="#5850EC"
                  stroke-width="1.5"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                ></path></svg
            ></span>
          </div>
          <div class="group">
            <div
              class="flex flex-row items-center text-sm font-semibold text-gray-700 group-hover:text-gray-900 break-all"
            >
              {{ 'PAC.Xpert.BackendServiceAPI' | translate: {Default: 'Backend Service API'} }}
            </div>
            <div class="text-sm font-normal text-gray-500 group-hover:text-gray-700 break-all">
              {{ 'PAC.Xpert.EasilyIntegratedApp' | translate: {Default: 'Easily integrated into your application'} }}
            </div>
            <div class="text-text-tertiary system-2xs-medium-uppercase"></div>
          </div>
        </div>
        <div class="flex flex-row items-center h-9">
          @if (enabledApi()) {
            <div class="px-2.5 py-px text-xs leading-5 rounded-md inline-flex items-center flex-shrink-0 text-green-800 bg-green-100 mr-2">
              {{ 'PAC.KEY_WORDS.InService' | translate: {Default: 'In Service'} }}
            </div>
          } @else {
            <div class="px-2.5 py-px text-xs leading-5 rounded-md inline-flex items-center flex-shrink-0 text-yellow-800 bg-yellow-100 mr-2">
              {{ 'PAC.KEY_WORDS.Disabled' | translate: {Default: 'Disabled'} }}
            </div>
          }

          <label class="inline-flex items-center cursor-pointer"
            [matTooltip]="'PAC.Xpert.EnableXpertApi' | translate: {Default: 'Enable or disable api for xpert'}"
            matTooltipPosition="above">
            <input type="checkbox" value="" class="sr-only peer" [ngModel]="enabledApi()" (ngModelChange)="updateApi({disabled: !$event})">
            <div class="relative w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
          </label>
        </div>
      </div>
      <div class="flex flex-col justify-center py-2">
        <div class="py-1">
          <div class="pb-1 text-sm text-gray-500">
            {{ 'PAC.Xpert.ServiceAPIEndpoint' | translate: {Default: 'Service API Endpoint'} }}
          </div>
          <div
            class="w-full h-9 pl-2 pr-0.5 py-0.5 bg-black bg-opacity-2 rounded-lg border border-black border-opacity-5 justify-start items-center inline-flex"
          >
            <div class="px-2 justify-start items-start gap-2 flex flex-1 min-w-0">
              <div class="text-gray-700 text-sm font-medium text-ellipsis overflow-hidden whitespace-nowrap">
                {{ apiUrl() }}
              </div>
            </div>
            <div class="border-r border-solid mx-2 border-divider-deep !h-3.5 shrink-0"></div>
            <div class="w-8 h-8 cursor-pointer rounded-lg flex justify-center items-center text-text-secondary hover:bg-gray-200 hover:text-text-primary"
              [matTooltip]="'PAC.KEY_WORDS.Copy' | translate: {Default: 'Copy'}"
              matTooltipPosition="above"
              (click)="copy(apiUrl())"
            >
              <i class="ri-clipboard-line text-lg"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="pt-2 flex flex-row items-center flex-wrap gap-y-2">
        <button
          type="button"
          class="btn disabled:btn-disabled btn-secondary btn-medium px-3 flex-shrink-0 !h-8 bg-white mr-2"
          (click)="openApiKey()"
        >
          <div class="flex items-center justify-center">
            <i class="ri-key-2-line text-lg mr-1.5"></i>
          </div>
          <div class="text-[13px] text-gray-800 font-medium">
            API {{'PAC.KEY_WORDS.SecretKey' | translate: {Default: 'Key'} }}
          </div>
        </button>
        <button type="button" class="btn disabled:btn-disabled btn-secondary btn-medium mr-2"
          (click)="openApiReference()"
        >
          <div class="flex flex-row items-center" >
            <i class="ri-file-text-line text-lg mr-1.5"></i>
            <span class="text-[13px]">
              {{ 'PAC.Xpert.APIReference' | translate: {Default: 'API Reference'} }}
            </span>
          </div>
        </button>
      </div>
    </div>
  </div>
</div>

@if (loading()) {
  <ngm-spin class="absolute top-0 left-0 w-full h-full" />
}

<ng-template #qrcode>
  <div cdkMenu class="pb-2">
    <qrcode #qrc [qrdata]="appUrl()" [width]="200"/>

    <div class="flex justify-center items-center">
      <div class="text-sm text-gray-500">
        {{ 'PAC.Xpert.ShareQRCode' | translate: {Default: 'Scan QR to share App'} }}
      </div>
      <div class="text-sm mx-1 text-gray-500">·</div>
      <div class="download cursor-pointer hover:underline" (click)="qrc.downloadQRCode()">
        {{ 'PAC.Xpert.DownloadQRCode' | translate: {Default: 'Download QR Code'} }}
      </div>
    </div>
  </div>
</ng-template>

<ng-template #perfInDevelopment>
  <pac-in-development @overlayAnimation1 [feature]="'PAC.Xpert.TracingAppPerf' | translate: {Default: 'Tracing app performance'}" class="w-80" />
</ng-template>


<xpert-statistics />